<template>
  <transition name="el-zoom-in-center">
    <div class="JADP-preview-main">
      <div class="JADP-common-page-header">
        <div></div>
        <h3>培训班：{{ classInf.classname }}</h3>
        <div class="xue-shi">
          <div>总学时：{{ classInf.hours }}</div>
        </div>
        <div class="options">
          <el-button @click="goBack">{{ "< 返回列表" }}</el-button>
        </div>
      </div>
      <el-row
        class="main_"
        :gutter="30"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <el-col :span="16">
          <p>
            学员信息
            <el-button type="text" icon="el-icon-upload2" @click="exportData()"
              >导出
            </el-button>
          </p>
          <JADP-table
            :data="list"
            ref="table1"
            class="tb1"
            highlight-current-row
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center', cursor: 'pointer' }"
            @row-click="rowClick"
          >
            <!-- <el-table-column label="班级" prop="clazzName"></el-table-column> -->
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="身份证" prop="idcard"></el-table-column>
            <el-table-column label="单位" prop="company"></el-table-column>
            <el-table-column label="总学时" prop="hours"></el-table-column>
            <el-table-column label="学习进度" prop="studyprogress">
              <template #default="{ row }">
                <el-progress
                  :width="25"
                  :height="25"
                  :percentage="
                    Number(row.studyprogress) ? row.studyprogress / 1 : 0
                  "
                ></el-progress>
              </template>
            </el-table-column>
          </JADP-table>
          <pagination
            :total="total"
            :page.sync="listQuery.currentPage"
            :limit.sync="listQuery.pageSize"
            @pagination="initData(id)"
          />
        </el-col>
        <el-col :span="8" class="jin-du">
          <div class="jd-circle">
            <el-progress
              :stroke-width="10"
              :width="205"
              :height="205"
              type="circle"
              :percentage="
                Number(classInf.averageprogress)
                  ? classInf.averageprogress / 1
                  : 0
              "
              style="margin-bottom: 30px"
            ></el-progress>
            <h3>班级平均进度</h3>
          </div>
        </el-col>
      </el-row>
      <el-row class="zb">
        <el-tabs
          v-model="activeName"
          style="padding: 0 20px"
          @tab-click="tabClick"
        >
          <!-- <el-row :gutter="16" style="margin-bottom: 20px; position: relative">
            <el-button
              type="primary"
              icon="el-icon-download"
              @click="exportData"
              style="position: absolute; right: 30px"
              >导出
            </el-button>
            <el-col :span="3" v-if="activeName == '1'">
              <el-select
                v-model="name"
                placeholder="完成状态"
                clearable
              ></el-select>
            </el-col>
            <el-col :span="3" v-if="activeName == '1'">
              <el-select
                v-model="name"
                placeholder="考试结果"
                clearable
              ></el-select>
            </el-col>
            <el-col :span="3">
              <el-input v-model="name" placeholder="姓名" clearable></el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="rest(true)">查询</el-button>
              <el-button type="primary" @click="rest()">重置</el-button>
            </el-col>
          </el-row> -->
          <el-tab-pane name="1" label="课程分析">
            <div class="tb">
              <JADP-table
                :data="list1"
                class="tb1"
                ref="tablea"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
              >
                <el-table-column
                  label="课程名称"
                  prop="crmname"
                ></el-table-column>
                <el-table-column
                  label="课程总学时"
                  prop="hours"
                ></el-table-column>
                <el-table-column label="已完成学时" prop="stuhours">
                  <template #default="{ row }">
                    <div>{{ row.stuhours || 0 }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="最近学习" prop="recentTime">
                  <template #default="{ row }">
                    {{ row.recentTime || "未学习" }}
                  </template>
                </el-table-column>
                <el-table-column label="学习进度" prop="courseSchedule">
                  <template #default="{ row }">
                    <el-progress
                      :width="25"
                      :height="25"
                      :percentage="
                        Number(row.courseSchedule) ? row.courseSchedule / 1 : 0
                      "
                    ></el-progress>
                  </template>
                </el-table-column>
              </JADP-table>
            </div>
            <pagination
              :total="total1"
              :page.sync="listQuery1.currentPage"
              :limit.sync="listQuery1.pageSize"
              @pagination="initData1(id)"
            />
          </el-tab-pane>
          <el-tab-pane name="2" label="考试分析">
            <div class="tb">
              <JADP-table
                :data="list2"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
                ref="tableb"
              >
                <el-table-column
                  label="考试名称"
                  prop="papername"
                ></el-table-column>
                <el-table-column
                  label="试卷时长"
                  prop="hours"
                ></el-table-column>
                <el-table-column
                  label="总分"
                  prop="totalScore"
                ></el-table-column>

                <el-table-column
                  label="及格分"
                  prop="jgscore"
                ></el-table-column>
                <el-table-column
                  label="考试时间"
                  prop="answertime"
                ></el-table-column>
                <el-table-column
                  label="考试分数"
                  prop="stuscore"
                ></el-table-column>
                <el-table-column
                  label="是否通过"
                  prop="inclasstestresults"
                ></el-table-column>
              </JADP-table>
            </div>
            <pagination
              :total="total2"
              :page.sync="listQuery2.currentPage"
              :limit.sync="listQuery2.pageSize"
              @pagination="initData2(id)"
            />
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <ExportBox
        v-if="exportBoxVisible"
        ref="ExportBox"
        @download="download2"
      />
    </div>
  </transition>
</template>
<script>
import {
  reteOfLearing,
  studentAnalysis,
  practiceAnalysis,
  classInfo
} from "@/api/class";
import ExportBox from "./ExportBox";
import request from "@/utils/request";
export default {
  name: "bb",
  components: {
    ExportBox
  },
  data() {
    return {
      name: "",
      exportBoxVisible: false,
      dataForm1: {
        id: ""
      },
      classInf: {},
      total: 0,
      total1: 0,
      total2: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: ""
      },
      listQuery1: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: ""
      },
      listQuery2: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: ""
      },
      query: {
        clazzid: "",
        name: ""
      },
      query1: {
        clazzid: "",
        stuid: ""
      },
      query2: {
        clazzid: "",
        stuid: ""
      },
      columnList: [
        // { label: "账号", prop: "acconutnumber" },
        { label: "班级", prop: "clazzName" },
        { label: "姓名", prop: "name" },
        { label: "身份证", prop: "idcard" },
        { label: "单位", prop: "company" },
        { label: "总学时", prop: "hours" },
        // { label: "学习时长", prop: "studytime" },
        { label: "学习进度", prop: "studyprogress" }
        // { label: "完成时间", prop: "finishtime" },
        // { label: "考试结果", prop: "examresult" }
      ],
      // columnList1: [
      //   { label: "账号", prop: "account" },
      //   { label: "姓名", prop: "name" },
      //   { label: "组织架构", prop: "organizationalstructure" },
      //   { label: "学习时长", prop: "learningtime" },
      //   { label: "学习进度", prop: "learningprogress" },
      //   { label: "完成时间", prop: "finishtime" },
      //   { label: "随堂测验结果", prop: "inclasstestresults" },
      // ],
      list: [],
      list1: [],
      list2: [],
      activeName: "1",
      id: ""
    };
  },
  methods: {
    rowClick(row) {
      this.rest();
      this.query1.stuid = row.stuid;
      this.query2.stuid = row.stuid;
      if (this.activeName == "1") {
        this.initData1(this.id);
      } else {
        this.initData2(this.id);
      }
    },
    goBack() {
      this.$emit("refresh1", true);
    },
    rest() {
      this.listQuery1 = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: ""
      };
      this.listQuery2 = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: ""
      };
    },
    tabClick({ name }) {
      this.rest();
      // if (!val) {
      //   this.name = "";
      //   this.query1 = {
      //     clazzid: "",
      //     name: "",
      //   };
      //   this.query2 = {
      //     clazzid: "",
      //     name: "",
      //   };
      // }
      let ref = name == "1" ? "tablea" : "tableb";
      this.$nextTick(() => {
        this.$refs[ref].$refs.JADPTable.doLayout();
      });
      this.activeName == "1" && this.initData1(this.id);
      this.activeName == "2" && this.initData2(this.id);
    },
    async classInfo(id) {
      const { data } = await classInfo(id,this.$store.getters.organizeId);
      this.classInf = data;
    },
    exportData() {
      this.exportBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.ExportBox.init(this.columnList);
      });
    },
    // download(data) {
    //   let url, listQuery, query;
    //   // 1 导出学员 2 导出练习
    //   if (this.activeName == "1") {
    //     url = "/api/studentanalysis/Xy_ks_studentanalysis/Actions/Export";
    //     listQuery = this.listQuery1;
    //     query = this.query1;
    //   } else {
    //     url = "/api/practiceanalysis/LearningAnalysisService/Actions/Export";
    //     listQuery = this.listQuery2;
    //     query = this.query2;
    //   }
    //   let query1 = { ...data, ...listQuery, ...query };
    //   request({
    //     url,
    //     method: "GET",
    //     data: query1,
    //   }).then((res) => {
    //     if (!res.data.url) return;
    //     window.location.href = this.define.comUrl + res.data.url;
    //     this.$refs.ExportBox.visible = false;
    //     this.exportBoxVisible = false;
    //   });
    // },
    download2(data) {
      let query = { ...data, ...this.listQuery, ...this.query1 };
      request({
        url: `/api/studentanalysis/Xy_ks_studentanalysis/Actions/Export`,
        method: "GET",
        data: query
      }).then(res => {
        if (!res.data.url) return;
        window.location.href = this.define.comUrl + res.data.url;
        this.$refs.ExportBox.visible = false;
        this.exportBoxVisible = false;
      });
    },
    async initData(id) {
      this.id = id;
      this.query.name = this.name;
      let query = this.checkQuery(id, this.query, this.listQuery);
      try {
        const { data } = await studentAnalysis(query);
        this.list = data.list;
        if (this.list.length) {
          this.$refs.table1.$refs.JADPTable.setCurrentRow(this.list[0]);
          this.query1.stuid = this.list[0].stuid;
          this.query2.stuid = this.list[0].stuid;
          this.initData1(id);
        }
        this.total = data.pagination.total;
      } catch {}
    },
    async initData1(id) {
      let query = this.checkQuery(id, this.query1, this.listQuery1);
      const { data } = await reteOfLearing(query);
      this.list1 = data.list;

      this.total1 = data.pagination.total;
    },
    async initData2(id) {
      let query = this.checkQuery(id, this.query2, this.listQuery2);
      try {
        const { data } = await practiceAnalysis(query);
        this.list2 = data.list;
        this.total2 = data.pagination.total;
      } catch {}
    },
    checkQuery(id, query, listQuery) {
      this.id = id;
      query.clazzid = this.id;
      let _query = {
        ...listQuery,
        ...query,
        organizeId:this.$store.getters.organizeId
      };
      let query1 = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query1[key] = _query[key].join();
        } else {
          query1[key] = _query[key];
        }
      }
      return query1;
    }
  }
};
</script>
<style scoped lang="scss">
.JADP-preview-main {
  h3 {
    font-weight: normal;
  }
  .xue-shi {
    position: absolute;
    left: 675px;
  }

  .main_ {
    padding: 10px 20px;
    p {
      line-height: 30px;
    }
  }
  .zb {
    height: 350px;
    .tb {
      height: 222px;
      overflow: auto;
    }
  }
  .tb1 {
    height: 250px;
  }
  .jin-du {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
  }
  .tb ::v-deep .el-table__body-wrapper {
    height: calc(100% - 40px) !important;
  }
}
.tb1 ::v-deep .el-progress--circle .el-progress__text,
.el-progress--dashboard .el-progress__text {
  width: 50px;
  left: 22px;
  margin-top: 1px;
}
.jd-circle {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
// ::v-deep .el-table {
//   width: 100%;
//   display: flex;
//   flex-direction: column;
//   .el-table__body-wrapper {
//     flex: 1;
//   }
// }
</style>
